<template>
  <page-header-wrapper>
    <a-button type="" style="margin-bottom: 20px;" @click="returnBack">返回</a-button>
    <a-card :bordered="false">
      <a-descriptions title="基本信息" bordered>
        <a-descriptions-item label="头像">
          <a-avatar :size="40" :src="info.logo" />
        </a-descriptions-item>
        <a-descriptions-item label="姓名">
          {{info.name}}
        </a-descriptions-item>
        <a-descriptions-item label="性别">
          {{info.sex==1?'男':'女'}}
        </a-descriptions-item>
        <a-descriptions-item label="生日">
          {{info.shengri}}
        </a-descriptions-item>
        <a-descriptions-item label="手机号">
          {{info.phone}}
        </a-descriptions-item>
        <a-descriptions-item label="身份证号码">
          {{info.cardid}}
        </a-descriptions-item>
        <a-descriptions-item label="城市" :span='3'>
          {{info.province}}{{info.city}}{{info.county}}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions style="margin-top: 20px;" title="职业信息" bordered>
        <a-descriptions-item label="第一执业机构">
          {{info.jigou}}
        </a-descriptions-item>
        <a-descriptions-item label="职称">
          {{info.zhicheng}}
        </a-descriptions-item>
        <a-descriptions-item label="生日">
          {{info.shengri}}
        </a-descriptions-item>
        <a-descriptions-item :span='3' label="一句话简介">
          {{info.title}}
        </a-descriptions-item>
        <a-descriptions-item :span='3' label="详细介绍">
          {{info.content}}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions style="margin-top: 20px;" title="认证备案" bordered>
        <a-descriptions-item label="身份证人像面" :span='3'>
          <a-row>
            <a-col :span="4" v-for="(item,index) in info.cardidzheng.split(',')" :key='index'>
              <img @click="previewImg(item)" :src="item" style="width: 100px;100px" />
            </a-col>
          </a-row>
        </a-descriptions-item>
        <a-descriptions-item label="身份证国徽面" :span='3'>
          <a-row>
            <a-col :span="4" v-for="(item,index) in info.cardidfan.split(',')" :key='index'>
              <img @click="previewImg(item)" :src="item" style="width: 100px;100px" />
            </a-col>
          </a-row>
        </a-descriptions-item>
        <a-descriptions-item label="执业证" :span='3'>
          <a-row>
            <a-col :span="4" v-for="(item,index) in info.zhiyezheng.split(',')" :key='index'>
              <img @click="previewImg(item)" :src="item" style="width: 100px;100px" />
            </a-col>
          </a-row>
        </a-descriptions-item>
        <a-descriptions-item label="资格证" :span='3'>
          <a-row>
            <a-col :span="4" v-for="(item,index) in info.zigezheng.split(',')" :key='index'>
              <img @click="previewImg(item)" :src="item" style="width: 100px;100px" />
            </a-col>
          </a-row>
        </a-descriptions-item>
        <a-descriptions-item label="医师证" :span='3'>
          <a-row>
            <a-col :span="4" v-for="(item,index) in info.yishizheng.split(',')" :key='index'>
              <img @click="previewImg(item)" :src="item" style="width: 100px;100px" />
            </a-col>
          </a-row>
        </a-descriptions-item>
      </a-descriptions>
      <imgBox ref='preimg'></imgBox>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import {
    doctorDetail
  } from '@/api/doctor'
  import imgBox from '@/components/previewImg/index'
  export default {
    components: {
      imgBox
    },
    data() {
      return {
        info: '',
        id: 0
      }
    },
    created() {
      this.id = this.$route.query.id * 1
      this.getDetail()
    },
    methods: {
      getDetail() {
        doctorDetail({
          id: this.id
        }).then(res => {
          this.info = res.data
        })
      },
      previewImg(img) {
        this.$refs.preimg.initData(img)
      },
      returnBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style>
</style>